<template>  
  <div class="conditionWarp_seachCaseName">
  	<div class="seach_input">
			<div class="seach_title">
       文章标题:
        <!-- <div class="seach_title-down">
          <ul >
            <li>
              <div class="seach_down_item" :class="active">
                文章标题:
              </div>
            </li>
          </ul>
        </div> -->
			</div>
      <Input 
        v-model="seach_text" 
        placeholder = "案场名称" 
        @on-change = "handleSeach"
        @on-focus = "focusSeach"
        @on-blur = "blurSeachCaseName"
        ></Input>
      <!-- <Input 
        v-if="!seachType"
        v-model="seach_text" 
        placeholder = "专案名称" 
        @on-blur = "blurSeachUserName"
        ></Input> -->
  	</div>
  	<div class="seach_down" v-show="modal_down && caseList && caseList.length>0">
  		<ul v-if="caseList && caseList.length>0">
  			<li v-for="(item,index) in caseList" :key="index" @click="handleItemClick(item)">
  				<div class="seach_down_item" :title="item.name">
  					{{ item.name }}
  				</div>
  			</li>
  		</ul>
  	</div>
  </div>
</template>
<script>

import Helper from '@/common/helper'
import Rest from '@/rest'
import Api from '@/api'

export default {
  data () {
    return {
			seach_text: '',
      seach_textBackUp: '',
			seach_textBackUp2: '',
			resultObj: {},
			caseList: [],
			modal_down: false,
      seachType: 1,
    }
  },
  props: {
    
  },
  methods:{
    init(){
      var that = this;
      that.resetInit();
    },
    resetInit(){
      var that = this;
      that.seach_text = '';
      that.seach_textBackUp = '';
      that.seach_textBackUp2 = '';
    },
    handleSeach() {
      var that = this;
      if(that.seach_textBackUp != that.seach_text){
      	that.resultObj = {}
      	that.seach_textBackUp = that.seach_text;
    		that.getList();
      }
    },
    focusSeach() {
    	var that = this;
    	that.modal_down = true;
      that.seach_textBackUp2 = that.seach_text;
    },
    blurSeachCaseName() {
    	var that = this;
    	setTimeout(function() {
    		that.modal_down = false;
        if(that.seach_textBackUp2 != that.seach_text){
          that.$emit('handleSeachCaseName',that.seach_text,'');
        }
    	}, 200);
    },
    blurSeachUserName(){
      var that = this;
      setTimeout(function() {
        if(that.seach_textBackUp2 != that.seach_text){
          that.$emit('handleSeachCaseName','',that.seach_text);
          that.seach_textBackUp2 = that.seach_text;
        }
      }, 200);
    },
    // 切换分类
//     handleTitleItemClick(key){
//       var that = this;
//       if(that.seachType != key){
//         that.seachType = key;
//         if(that.seach_text != ''){
//           that.$emit('handleSeachCaseName','','');
//         }
//         that.resetInit();
//       }
//     },
    handleItemClick(obj) {
    	var that = this;
    	that.seach_text = obj.name;
      that.seach_textBackUp = that.seach_text;
      that.seach_textBackUp2 = that.seach_text;
    	that.resultObj = obj.name;
    	setTimeout(function() {
    		that.getList();
    	}, 200);
      that.$emit('handleSeachCaseName',that.resultObj,'');
    },
    getList() {
    	var that = this;
    	that.caseList = [];
      var restApi = Api.caseManage.case.seachCaseName;
      var parms = {
      	"caseName": that.seach_text
      }
      if(!parms.caseName){ 
      	return;
      	that.resultObj = {};
      }
      Rest.get(restApi,parms).done(function(res) {
        if (Helper.isSuccess(res)) {
          if (res.data.nameVo) {
            that.caseList = res.data.nameVo;
          } 
        } else {
          that.$Message.error(res.status.msg);
        }
      });
    },
    warpClick() {}
  },
  created() {
    this.init();
  },
  activated() {
    // this.init();
  },
}
</script>

<style lang="scss">
	@import "../../assets/sass/install";
	.conditionWarp_seachCaseName{
		display: inline-block;
    width: 200px;
    height: 32px;
    color: #657180;
    position: relative;
    .ivu-select {
      .ivu-select-selection {
        padding-left:70px;
      }
    }
    .seach_input{
    	position: relative;
    	.seach_title{
    		cursor: pointer;
    		display: inline-block;
    		position: absolute;
        z-index: 1;
    		left: 0;
    		top: 0;
    		width: 76px;
    		height: 32px;
    		font-size: 14px;
    		color: #ccc;
    		vertical-align: top;
    		padding-left: 7px;
    		padding-top: 2px;
        text-align: left;
        color: #657180;
        &:hover{
          .seach_title-down{
            display:inline-block;
          }
          .ivu-select-arrow{
            transform: rotate(180deg);
          }
        };
        .seach_title-down{
          display: none;
          font-size: 13px;
          width: 100px;
        }
    	}
    }
    .seach_title-down,.seach_down{
      position: absolute;
      top: 42px;
      left: 0;
      @include transition(500ms);
      @include radius(3px);
      @include overflowCss();
      max-height: 380px;
      width: 180px;
      overflow: auto;
      overflow-x: hidden;
      padding: 5px 0px;
      background-color: #fff;
      box-shadow: 0 1px 6px rgba(0,0,0,.2);
      z-index: 900;
      text-align: left;
      &>ul{
      	font-size: 0;
      	&>li{
					font-size: 0;
      	}
      }
      .seach_down_item{
				padding: 7px 16px;
				font-size: 13px;
				line-height: normal;
				background-color: #fff;
				cursor: pointer;
				overflow: hidden;
	      white-space: nowrap;
	      text-overflow:ellipsis;
        &.active{
          background-color: #02b0f0;
          color: #fff;
          &:hover{
            background-color: #02b0f0;
            color: #fff;
          }
        }
				&:hover{
					background-color: #f3f3f3;
				}
      }
      .seach_nodata{
      	text-align: center;
      	color: #999;
      	font-size: 13px;
      	padding: 5px 0;
      }
    }
    .seach_down{
      left: 70px;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		    color: #999; opacity:1; 
		}

		::-moz-placeholder { /* Mozilla Firefox 19+ */
		    color: #999;opacity:1;
		}

		input:-ms-input-placeholder{
		    color: #999;opacity:1;
		}

		input::-webkit-input-placeholder{
		    color: #999;opacity:1;
		}
		.ivu-input-wrapper{
			.ivu-input{
				padding-left: 70px;
			}
		}
	}
</style>
